<template>
	<div class="add-jq-dialog">
		<!--添加主机 至 集群-->
		
		
		<appdialog 
			ref="dialog"
			:visible="false" 
			title="添加主机"
			@confirm="confirmAdd"
			@cancle="cancleAdd"
			width="30%"
			>
			
			<el-form 
				ref="addForm" 
				:rules="rules" 
				:model="addForm"
				label-width="100px"
				
				>
				
				<el-alert
			    title="请输入同网段的起止IP"
			    type="info"
			    :closable="false"
			    show-icon>
			  </el-alert>
			  
			  <el-form-item label="所属集群：" prop="params.clusterId">
					<jiqunSelect
						:defaultValue="id"
						@change="clusterIdChange"
						:id="id"
						ref="jiqunselect"
						></jiqunSelect>
				</el-form-item>
				
				<el-form-item label="起始IP：" prop="startIp">
					<baseInput defaultValue="" placeholder="请输入起始IP" @change="startIpChange" ref="startip"></baseInput>
				</el-form-item>
				
				<el-form-item label="结束IP：" prop="endIp">
					<baseInput defaultValue="" placeholder="请输入结止IP" @change="endIpChange" ref="enip"></baseInput>
				</el-form-item>
				
				
			</el-form>
			
			
		</appdialog>
		
		
		
	</div>
</template>

<script>

import appdialog from "@/view/components/dialog/dialog";
import baseInput from "@/view/components/input/input";
import jiqunSelect from "@/view/components/select/jiqunSelect";
import {validateIp} from "@/utils/validate";

const validateIpRule = (rule, value, callback) => {
  if (validateIp(value)) {
    callback();
  } else {
  	callback(new Error('请输入正确的IP地址'));
  }
};

import {saveIp} from "@/service/swagger/ResourceHostController"

export default {
	props : [
		"id" // 集群id
	],
	name: "addJQDialog",
	components: {
		appdialog,
		baseInput,
		jiqunSelect,
//		huanjingStatusSelect,
//		nameInput,
//		appTextarea
	},
	data() {
    return {
      addForm : {
      	startIp : "",
      	endIp : "",
      	
      	params : {
      		clusterId : "",
	      	disableIp : "", // 禁用ip
	      	ipRange : "" , // IP区段
      	}
      },
      rules : {
      	'params.clusterId': [
          { required: true, message: '请选择集群', trigger: 'blur' },
        ],
      	startIp: [
          { required: true, message: '请输入起始IP', trigger: 'blur' },
          { validator: validateIpRule, trigger: 'blur' }
        ],
      	endIp: [
          // { required: true, message: '请输入结止IP', trigger: 'blur' },
          // { validator: validateIpRule, trigger: 'blur' }
        ],
      }
    }
  },
  mounted() {
  	this.addForm.params.clusterId = this.id ;
  },
	methods:{
   	open(){
   		this.$refs.dialog.open();
   	},
   	// 表单重置
		initFrom(){
			setTimeout(()=>{
				console.log(6666, this.$refs)
				for(let i in this.$refs){
					let ref = this.$refs[i]
					if(ref.reset){
						ref.reset();
					}
				}
			},90)
		},
		close(){
			this.initFrom();
			this.$refs.dialog.close();
			this.$refs.addForm.clearValidate(['params.clusterId','startIp'])
		},
   	confirmAdd(){
   		console.log("确认添加" , this.addForm )
   		
   		// 验证表单
   		this.$refs.addForm.validate((valid) => {
        if (valid) {
        	// 验证通过
          this.submitAdd();
        } else {
        	setTimeout(()=>{
        		this.open();
        	},50)
          
          return false;
        }
      });
   		// 
   	},
   	submitAdd(){
   		
   		let params = {
   			...this.addForm.params,
   			ipRange : this.addForm.startIp + "-" + this.addForm.endIp
   		}
   		saveIp(params).then(ret=>{
				if(ret&&ret.code == 0){
					this.$message({message: '添加成功',type: 'success',duration : 2000,})
					this.close()
          this.$emit("addSucess")
				}else{
					this.close()
				}
   		})

   	},
   	cancleAdd(){
   		this.close()
   	},
   	
   	clusterIdChange(name,v){
   		this.addForm.params.clusterId = v;
   	},
   	startIpChange(name,v){
   		this.addForm.startIp = v;
   	},
   	endIpChange(name,v){
   		this.addForm.endIp = v;
   	},
   	
   	
	}
}
</script>

<style scoped lang="scss">
@import "../../../styles/variables.scss";


</style>